AWS Amplify CLI をチュートリアルで試してみた

AWS Amplify CLI をチュートリアルで試してみた

#初心者向け
#AWS CLI
#開発環境
#AWS Amplify
#AWS
Ito ma

Ito ma

facebook logohatena logotwitter logo
Clock Icon2019.07.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Guten Tag! また半袖が着れる季節になってきました、ベルリンから伊藤です！3週間前 ビキニ→先週 コート→今 半袖（※あくまで一例です）とベルリンの季節の移り変わりが不思議です。

さて、AWS Amplify というサービスの理解のために、Getting Started のチュートリアルに従って以前試してみた内容を公開します。

AWS Amplify とは、Webサイト/Webアプリのデプロイ・ホスティングが簡単に行える、昨年の re:Invent でリリースされたサービスです。東京リージョンでコンソールが使用できるようになったのも、今年4月のこと。 Dev.IO でも Amplify の記事 が続々と出てきています。

では早速行ってみましょう。

前準備

Amplify CLI のインストールと設定を行います。

下記のバージョンで確認しています。まだの場合は Node.js と npm のインストールが必要です。

$ node -v
v10.16.0
$ npm -v
6.9.0

$ sudo npm install -g @aws-amplify/cli を実行して、Amplify CLI をインストールします。

次に $ amplify configure を実行して Amplify CLI 設定を行います。実行するとブラウザが開いてログインが求められます。

詳細な流れはこちらのサイトで丁寧に紹介されていますが、Amplify が実行されるリージョン、IAM ユーザ、CLI プロファイルなどを定義します。下記のようにインタラクティブに値を入力していきます。（例はリージョン以外デフォルト）

これで amplify コマンドが使用できるようになります。

1. 新しいアプリの作成

下記それぞれ実行し、amplify-js-app ディレクトリを作成、空のファイルを用意します。

$ mkdir -p amplify-js-app/src && cd amplify-js-app
$ touch package.json index.html webpack.config.js src/app.js

こんな感じで出来上がりますね。

$ tree
.
|-- index.html
|-- package.json
|-- src
|   `-- app.js
`-- webpack.config.js

1 directory, 4 files

作成して空の package.json に下記の通り書き込みます。

{
  "name": "amplify-js-app",
  "version": "1.0.0",
  "description": "Amplify JavaScript Example",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "copy-webpack-plugin": "^4.5.2",
    "webpack-dev-server": "^3.1.5"
  },
  "scripts": {
    "start": "webpack && webpack-dev-server --mode development",
    "build": "webpack"
  }
}

上で定義した内容に沿って、npm install で関連パッケージをインストールします。

$ npm install

> [email protected] install /Users/mai/Downloads/amplify-js-app/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download 
[fsevents] Success: "/Users/mai/Downloads/amplify-js-app/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

added 653 packages from 370 contributors and audited 9071 packages in 13.305s
found 0 vulnerabilities

各ファイルに下記の通り入力します。今回の検証に使用するウェブアプリのページです。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Amplify Framework</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body { font-family: "Amazon Ember", "Helvetica", "sans-serif"; margin: 0; }
            a { color: #FF9900; }
            h1 { font-weight: 300; }
            .app { width: 100%; }
            .app-header { color: white; text-align: center; background: linear-gradient(30deg, #f90 55%, #FFC300); width: 100%; margin: 0 0 1em 0; padding: 3em 0 3em 0; box-shadow: 1px 2px 4px rgba(0, 0, 0, .3); }
            .app-logo { width: 126px; margin: 0 auto; }
            .app-body { width: 400px; margin: 0 auto; text-align: center; }
            .app-body button { background-color: #FF9900; font-size: 14px; color: white; text-transform: uppercase; padding: 1em; border: none; }
            .app-body button:hover { opacity: 0.8; }
        </style>
    </head>
    <body>
        <div class="app">
            <div class="app-header">
                <div class="app-logo">
                    <img src="https://aws-amplify.github.io/images/Logos/Amplify-Logo-White.svg" alt="AWS Amplify" />
                </div>
                <h1>Welcome to the Amplify Framework</h1>
            </div>
            <div class="app-body">
                <button id="AnalyticsEventButton">Generate Analytics Event</button>
                <div id="AnalyticsResult"></div>
            </div>
        </div>
        <script src="main.bundle.js"></script>
    </body>
</html>

const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        contentBase: './dist',
        overlay: true,
        hot: true
    },
    plugins: [
        new CopyWebpackPlugin(['index.html']),
        new webpack.HotModuleReplacementPlugin()
    ]
};

早速、 $ npm start を実行してみましょう。"Compiled successfully." が表示されたら、ブラウザで http://localhost:8080 にアクセスしてみます。次のようにページが表示されました！しかし、ボタンを押してみてもまだ何も起きません。

次に進むので実行中の $ npm start は一度キャンセルしてOKです。

2. Amplify のインストール

続けて amplify-js-app ディレクトリ直下で、$ npm install --save aws-amplify を実行してアプリに Amplify をインストールします。

3. AWS バックエンドの設定

同じ場所で、 $ amplify init を実行します。ここでは新しい AWS 側のバックエンドリソースを作成し、アプリ用に設定していきます。

こちらも詳細な流れは先ほどのサイトで丁寧に紹介されていますが、今回はすべてデフォルト値で、environment の名前は dev で進めます。

環境が無事に初期設定されたら、下記のように表示されます。試しに amplify status や amplify を実行してみると、このように現在の状況と、利用可能なサービスカテゴリ一覧が表示されます。

必要なバックエンドリソースの作成

$ amplify add とコマンドを実行することで上のサービスカテゴリを追加できます。今回は、まず $ amplify add analytics を実行して分析カテゴリを追加しましょう。CloudFormation による Pinopoint 作成をローカルで定義しますが、値はまたデフォルトで進めます。次に、$ amplify push を実行してAWS 上で CloudFormation による作成を進めます。

上で出てくる Auth リソースは、Analytics の依存関係とのことで、自動的に一緒に作成されています。

Analytics が無事に作成されると、Amplify 設定ファイル（aws-exports.js）がソースディレクトリに追加されていました。

$ cat src/aws-exports.js 
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "eu-central-1",
    "aws_cognito_identity_pool_id": "eu-central-1:08f60bdd-7e97-41e1-9715-44b9abde140c",
    "aws_cognito_region": "eu-central-1",
    "oauth": {},
    "aws_mobile_analytics_app_id": "8baa8da65bc743208588aef11689087a",
    "aws_mobile_analytics_app_region": "eu-central-1"
};

[参考] サービス更新や削除には

  • サービスの更新: amplify update
  • サービスの削除: amplify remove
  • プロジェクトの削除: amplify delete (※ローカル・クラウドともすべて削除)

4. AWS リソースの統合

続いて、空の src/app.js ファイルに下記の通り書き込みます。

import Auth from '@aws-amplify/auth';
import Analytics from '@aws-amplify/analytics';

import awsconfig from './aws-exports';

// retrieve temporary AWS credentials and sign requests
Auth.configure(awsconfig);
// send analytics events to Amazon Pinpoint
Analytics.configure(awsconfig);

const AnalyticsResult = document.getElementById('AnalyticsResult');
const AnalyticsEventButton = document.getElementById('AnalyticsEventButton');
let EventsSent = 0;

AnalyticsEventButton.addEventListener('click', (event) => {
  const { aws_mobile_analytics_app_region, aws_mobile_analytics_app_id } = awsconfig;

  Analytics.record('Amplify Tutorial Event')
    .then((event) => {
      const url = `https://${aws_mobile_analytics_app_region}.console.aws.amazon.com/pinpoint/home/?region=${aws_mobile_analytics_app_region}#/apps/${aws_mobile_analytics_app_id}/analytics/events`;
      AnalyticsResult.innerHTML = '<p>Event Submitted. </p>';
      AnalyticsResult.innerHTML += '<p>Events sent: '+(++EventsSent)+'</p>';
      AnalyticsResult.innerHTML += '<a href="'+url+'" target="_blank">View Events on the Amazon Pinpoint Console</a>';
    });
});

ここでは前段で追加した Auth と Analytics のみインポートしています。

（代わりに import Amplify from 'aws-amplify' と書くことですべての Amplify ライブラリがインポートできるようですが、必要な分だけインポートした方が良いです）

さあ！改めまして、 $ npm start を実行して、ブラウザで http://localhost:8080 にアクセスします。

今度は、クリックするとこのようにイベントが送信されました！(私の環境では少し時間がかかり、クリックしてから1分ほどしてようやく submitted のメッセージが表示されました。)

Pinpoint のページに飛んでみると、クリックした数だけイベントが記録されていることが分かります。

5. Web サイトホスティングとしてアプリを起動

最後に、開発環境としてアプリで S3 の Web サイトホスティングを有効にします。 $ amplify add hosting を実行して、下記のように index ページやエラーページを指定して進めます。

終わったら、言われるがままに $ amplify publish でアプリをパブリッシュします。CloudFormation の更新と作成が行われ、完了したらウェブサイトホスティングのエンドポイントが表示されます。

✔ Uploaded files successfully.
Your app is published successfully.
http://<バケット名>.s3-website.eu-central-1.amazonaws.com

晴れて、ここまで構築したアプリがS3にデプロイされ、この URL から先ほどと同様にアプリのウェブページを実行できるようになりました！

ちなみに、このエンドポイントURLや先ほどのPinpoint URLを含め、アプリで使用されているカテゴリーの詳細は $ amplify status を実行していつでも確認することができます。

以上、Amplify のチュートリアルをご紹介しました！

おしまい

お掃除

下記、今回作成されたリソースを確認してそれぞれコンソールから削除しました。

  • Cognito ID プール
  • S3 バケット:
  • amplify-js-app-20190625170810-hostingbucket-dev
  • amplify-js-app-dev-20190625164628-deployment
  • Lambda 関数: amplify-js-app-dev-20190625164628-PinpointFunction-IW2AS2PF4LRD
  • AWS ロール:
  • arn:aws:iam::(Account ID):role/pinpointLambdaRolefffe5bd2-dev
  • arn:aws:iam::(Account ID):role/amplify-js-app-dev-20190625164628-authRole
  • arn:aws:iam::(Account ID):role/amplify-js-app-dev-20190625164628-unauthRole

豆知識

他にも Amplify CLI では様々なコマンドがありますのでご確認くださいませ。

なお、現時点の Amplify CLI (v1.7.6) では開発（S3ホスティング）・本番（CloudFront）へパブリッシュする際にパブリックへの読み取りを付与する仕様のようです。ただし、Amplify Console を使用してデプロイし、アクセス制限をかけることができるそうです。

取り急ぎ、とっても簡単な Amplify、試してみてはいかがでしょうか？

Share this article

facebook logohatena logotwitter logo

関連記事

プログラミング経験ゼロの非エンジニアがAI-StarterでChrome拡張機能を作ってみた

プログラミング経験ゼロの非エンジニアがAI-StarterでChrome拡張機能を作ってみた

User avatar
のんべぇ
2024.11.19
[初学者向け] IAM 設計の観点解説とテンプレート化してみた

[初学者向け] IAM 設計の観点解説とテンプレート化してみた

EC2のユーザーデータに記述したスクリプトが実行されない

EC2のユーザーデータに記述したスクリプトが実行されない

User avatar
なかた
2024.08.29
Mackerel を触ってみる（ログ監視編）

Mackerel を触ってみる（ログ監視編）

User avatar
板倉舞
2024.08.28
Classmethod's white logo
Facebook's logo
X's logo
YouTube's logo

© Classmethod, Inc. All rights reserved.